<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        $(function()
        {
            const $btn1=$(":button.btn1");
            const $btn2=$(":button.btn2");
            const $btn3=$(":button.btn3");
            //console.log($btn1);
            $btn1.click(function(){
                $btn1.get("http://127.0.0.1:8000/jquery-server",{a:100,b:200},function(){
                    console.log("data");
                })
            })

            $btn2.click(function(){
                console.log($btn2);
            })
        })
        */
        $(function(){
            //get
            $("button").eq(0).click(function(){
                $.get("http://127.0.0.1:8000/jquery-server",{a:100,b:200},function(data){
                    console.log(data);
                },"json")
            })
            //post
            $("button").eq(1).click(function(){
                $.post("http://127.0.0.1:8000/jquery-server",{a:100,b:200},function(data){
                    console.log(data);
                },"json")
            })
            //通用办法
            $("button").eq(2).click(function(){
                $.ajax({
                    //url
                    url:"http://127.0.0.1:8000/jquery-server",
                    //参数
                    data:{a:100,b:200},
                    //请求类型
                    type:"GET",
                    //响应体结果
                    dataType:"json",
                    //成功的回调
                    success:function(data){
                        console.log(data);
                    },
                    //超时时间
                    timeout:2000,
                    //失败的回调
                    error:function(){
                        console.log("出错了");
                    },
                    //头信息
                    Headers:{
                        c:300,
                        d:400
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">Jquery发送AJAX请求</h2>
        <button class="btn1">GET</button>
        <button class="btn2">POST</button>
        <button class="btn3">通用型方法AJAX</button>
    </div>
</body>
</html>